<template>
		<scroll-view scroll-y="true" class="scroll" >
			<view class="user-view">
				<view class="user-bg">
					
				</view>
				
				<view class="user-info-view">
					<image class="user-info-bg" src="../../static/icon_user_top_bg.png"></image>
					<view class="user-avatar" >
						<!-- #ifdef MP-WEIXIN -->
							<open-data type="userAvatarUrl"></open-data>
						<!-- #endif -->
						
					</view>
					<!-- #ifdef MP-WEIXIN -->
						<open-data class="user-nick-name" type="userNickName"></open-data>
					<!-- #endif -->
					
					<view v-if="vipLevel != 0" class="user-vip-view" @click="vipPay()">
						<image class="user-vip-icon" src="../../static/icon_user_vip.jpg"></image>
						<text >有效期 {{expireTime}}</text>
						<!-- <text >开通会员</text> -->
					</view>
					
				</view>
				
			</view>
			
			<view v-if="appId != 'wx8033fe9de99c902d'" class="power">
				<powerView :powerType="false"   ></powerView>
			</view>
			<view class="content">
<!-- 				<view class="item" @click="vipHistroyClick">
					<image class="item-img" src="../../static/icon_vip_histroy.png"></image>
					<text class="item-title">购买记录</text>
					<image class="item-arrow" src="../../static/icon_arrow.png"></image>
				</view>
				<view class="item-line"></view> -->
				<view class="item" @click="userEditClick">
					<image class="item-img" src="../../static/icon_user_info.png"></image>
					<text class="item-title">个人信息</text>
					<image class="item-arrow" src="../../static/icon_arrow.png"></image>
				</view>
				<view class="item-line"></view>
				<button v-if="theme==='knsh' || theme==='msdd'"  class="item contact-action" open-type="contact">
					<image class="item-img" src="../../static/icon_help.png"></image>
					<text class="item-title">帮助与反馈</text>
					<image class="item-arrow" src="../../static/icon_arrow.png"></image>
				</button>
				<button v-if="theme==='czcp'"  class="item contact-action" open-type="contact">
					<image class="item-img" src="../../static/icon_help.png"></image>
					<text class="item-title">帮助与反馈</text>
					<image class="item-arrow" src="../../static/icon_arrow.png"></image>
				</button>
				<view v-else class="item" @click="helpClick">
					<image class="item-img" src="../../static/icon_help.png"></image>
					<text class="item-title">帮助与反馈</text>
					<image class="item-arrow" src="../../static/icon_arrow.png"></image>
				</view>
				<view class="item-line"></view>
				<view class="item" @click="aboutClick">
					<image class="item-img" src="../../static/icon_about.png"></image>
					<text class="item-title">关于我们</text>
					<image class="item-arrow" src="../../static/icon_arrow.png"></image>
				</view>
				<view class="item-line"></view>
				<view class="item" @click="settingClick">
					<image class="item-img" src="../../static/icon_setting.png"></image>
					<text class="item-title">设置</text>
					<image class="item-arrow" src="../../static/icon_arrow.png"></image>
				</view>
			</view>
		</scroll-view>
</template>

<script>
	import powerView from '../../components/power-view.vue'
	import utils from '../../utils/utils.js'
	export default {
		components:{
			powerView,
		},
		data() {
			return {
				expireTime:'',
				vipLevel:-1,
				theme: getApp().globalData.theme,
				appId: getApp().globalData.appid,
			}
		},
		
		onLoad(){
			uni.$on('event_refresh_user', this.initData)
		},
		
		onShow(){
			console.log('onShow');
			this.initData();
		},
		
		methods: {
			vipHistroyClick() {
				uni.navigateTo({
					url: '/pages-assess/vip-buy-histroy/vip-buy-histroy'
				})
			},
			
			userEditClick(){
				uni.navigateTo({
					url:'/pages-assess/user-edit/user-edit'
				})
			},
			
			aboutClick(){
				uni.navigateTo({
					url: '/pages-assess/about/about'
				})
			},
			
			helpClick(){
				uni.navigateTo({
					url:'/pages-assess/contact/contact'
				})	
			},
			
			settingClick() {
				uni.navigateTo({
					url:'/pages-assess/setting-page/setting-page'
				})
			},
			
			getTimeStamp(isostr) {
				var date = utils.formatISODate(isostr);
				return utils.formatDate(date,'yyyy-MM-dd');
			},
			
			vipPay() {
				console.log('buyClick');
				uni.navigateTo({
					url:'/pages-assess/vip-pay/vip-pay?evaluateRecordId=0'
				})
			},
			
			initData(){
				console.log('user-home initData');
				this.vipLevel = getApp().globalData.user.org.vipLevel;
				if (utils.isEmpty(this.vipLevel)){
					this.vipLevel = 0;
				}
				if (this.vipLevel != 0){
					this.expireTime = this.getTimeStamp(getApp().globalData.user.org.expireTime);
				}	
			},

		}
	}
</script>

<style lang="scss">
	uni-page-body,#app {height: 100%;}
	
	page{
		height: 100%;
	}
	
	.scroll{
		height: 100%;
		background-color: #F7F7F7;
		
		
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

	}
	
	.container{

	}
	
	.user-bg{
		width: 100%;
		height:110rpx;
		background-color: #FFFFFF;
	}
	
	.user-view{
		width: 100%;
		height: 250rpx;
		position: relative;
	}
	
	.user-info-view{
		height:200rpx;
		background:linear-gradient(180deg,rgba(250,204,48,1) 0%,rgba(252,222,122,1) 100%);
		opacity:1;
		border-radius:4px;
		
		display: flex;
		flex-direction: row;
		align-items: center;
		
		position: absolute;
		top: 30rpx;
		left: 40rpx;
		right: 40rpx;
		
		@include power-bg(); 
	}
	
	.user-avatar{
		overflow:hidden;  
		  display: block;  
		  width: 130rpx;  
		  height: 130rpx;  
		  margin-left: 30rpx;
		  border-radius: 50%;  
		  border: 2px solid #fff;  
		  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);  
	}
	
	.user-nick-name{
		margin-left: 20rpx;
		flex-grow: 1;
		font-size: 28rpx;
	}
	
	.user-vip-view{
		height: 60rpx;
		background-color: #85E7B8;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		border-top-right-radius: 0rpx;
		border-bottom-right-radius: 0rpx;
		padding-left: 30rpx;
		padding-right: 10rpx;
		
		font-size:20rpx;
		font-weight:400;
		line-height:14px;
		color:rgba(51,51,51,1);
		opacity:1;
		
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
		z-index: 10;
	}
	
	.user-vip-icon{
		width: 12.79px;
		height: 9.87px;
		margin-right: 10rpx;
	}
	
	.user-info-bg{
		position: absolute;
		bottom: 0rpx;
		height: 200rpx;
		width: 100%;
		z-index: 1;
	}
	
	.power{
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 20rpx;
	}

	.content{
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-self: stretch;
		background:rgba(255,255,255,1);
		opacity:1;
		border-radius:4px;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-bottom: 20rpx;
	}
	
	.item{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 40rpx;
		padding-right: 40rpx;
		height: 100rpx;
		background-color: #FFFFFF;
	}
	
	.item-img{
		width:40rpx;
		height:40rpx;
	}
	
	.item-title{
		font-size:30rpx;
		font-weight:bold;
		line-height:29px;
		color:rgba(51,51,51,1);
		opacity:1;
		flex:1;
		margin-left: 20rpx;
		text-align: left;
	}
	
	.item-arrow{
		width: 18.38rpx;
		height: 34.24rpx;
	}
	
	.item-line{
		height:2rpx;
		background-color: rgba(230,230,230,1);
		opacity:1;
	}
	
	.contact-action {
		width: 100%;
	}
	
	.contact-action::after {
	  border: 0; 
	}
</style>
